<template>
    <div>
            <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>添加资讯</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
         </div>
        <div class="form-box" style="width:100%">
            <el-form ref="form"  :model="form" :rules="rules"  label-width="80px" >
                <div class='baseinfo'>
                <span class='baseinfo_title'>基础信息</span>
                <el-form-item label="资讯名称" prop="a_title">
                    <el-input placeholder="请输入资讯名称"  v-model="form.a_title" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item label="资讯分类" prop="a_type_id">
                    <el-select v-model="form.a_type_id" placeholder="请选择分类" style="width:300px;">
                        <el-option v-for='(item,index) in typeCenter' :key="index" :label="item.a_type_name" :value="item.a_tid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间" prop="a_publish_time">
                    <el-col :span="11">
                        <el-date-picker type="datetime"   placeholder="选择日期"  v-model="form.a_publish_time"  style="width:300px;"></el-date-picker>
                    </el-col>
                </el-form-item>
            
                <el-form-item label="额外操作">
            
                        <el-checkbox     v-model="form.toTop" >置顶</el-checkbox>
                        <!-- <el-checkbox     v-model="form.recommond" >推荐到首页</el-checkbox> -->
                  
                </el-form-item>

                <el-form-item label="文章类型">
                  
                        <el-radio  v-model="form.a_state"  :label="0">保存草稿</el-radio>
                        <el-radio  v-model="form.a_state"  :label="1">立即发布</el-radio>
                   
                </el-form-item>
                <el-form-item label="排列顺序">
                    <el-input v-model="form.a_sort" placeholder="从大到小" style="width:300px;"></el-input>
                </el-form-item>
                </div>

                <div class="baseinfo">
                 <span class='baseinfo_title'>文章详情</span>
                 <quill-editor ref="rpEditor"  v-model="form.content" :options="editorOption">
                     
                 </quill-editor>
                  <input style="display: none" type="file" name="avator" id="fileID"
                           accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadToServer('fileID')"/>
                 <el-form-item style="margin-top:30px;">
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>

                </div>

                
            </el-form>
        </div>
    <loading v-if='loading'></loading>
    </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import {api,apiGet} from '@/api/index';
import loading from "@/components/common/loading.vue";
let Server = new HttpReq();
export default {
  components: {
    quillEditor,
    loading
  },
  created() {
    // alert('')
    let a_id = this.$route.query.newsId;
    //console.log( this.$route)
    if (a_id) {
      this.form.a_id = a_id;
      // this.getNewsDetail(a_id);
    }
  },
    mounted() {
      //console.log('aaaaaaaaaaaaaaaaaaa')
    let vm = this;
   // this.getType();
    let imgHandler = async function(image) {
      vm.addImgRange = vm.$refs.rpEditor.quill.getSelection();
      if (image) {
        let fileInput = document.getElementById("fileID"); //隐藏的file文本ID
        fileInput.click(); //加一个触发事件
      }
    };
    //绑定图片上传操作
    vm.$refs.rpEditor.quill
      .getModule("toolbar")
      .addHandler("image", imgHandler);
  },
  data: function() {
    return {
      loading:false,
      form: {
        a_id: 0,
        a_title: "",
        a_type_id: "",
        a_publish_time: "",
        a_state: 1,
        a_sort: 0,
        a_extension_op: "",
        content: "",
        toTop: false,
        recommond: false
      },
      rules: {
        a_title: [
          { required: true, message: "请输入文章标题", trigger: "blur" }
        ],
        a_type_id: [
          {type:'number', required: true, message: "请选择文章分类", trigger: "blur" }
        ],
        a_publish_time: [
          //{ type:'string',required: true, message: "请设置发布时间", trigger: "blur" }
        ]
      },
      editorOption: {
        placeholder: "请输入文章内容"
        // something config
      },
      typeCenter: []
    };
  },
  methods: {
    uploadToServer(id) {
      let formdata = new FormData();
      let self = this;
      let file = document.getElementById(id).files[0];
      formdata.append("image", file);
      Server._POST_FILE(
        rpConfig.API_URI + "/Helpapi/uploadImg",
        formdata,
        function(data) {
          let value = data.data.url;
          //console.log(value);
          self.addImgRange = self.$refs.rpEditor.quill.getSelection();
          self.$refs.rpEditor.quill.insertEmbed(
            self.addImgRange != null ? self.addImgRange.index : 0,
            "image",
            value,
            Quill.sources.USER
          );
        }
      );
    },
    getType() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/newscenter.Index/getNewsType",
        {},
        function(response) {
          self.typeCenter = response.data;
        }
      );
    },
    onEditorChange({ editor, html, text }) {
      this.form.content = html;
    },
    onSubmit(formName) {
      
      const self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          Server._POST(
            rpConfig.API_URI + "/newscenter.Index/createNewsItem",
            self.form,
            function(data) {
              self.$message.success(data.msg);
              setTimeout(() => {
                self.$router.push("/newcenter");
              }, 2000)
            }
          );
        } else {
          self.$message.error("文章内容不完整");
          return false;
        }
      });
    },
    getNewsDetail: function($a_id) {
      let self = this;
      // Server._POST(
      //   rpConfig.API_URI + "/newscenter.Index/getNewsDetail",
      //   { a_id: $a_id },
      //   function(data) {
        
      //     self.form.a_id = data.data.a_id;
      //     self.form.a_title = data.data.a_title;
      //     self.form.a_type_id = data.data.a_type_id ;
      //     self.form.a_publish_time = data.data.a_publish_time;
      //     self.form.a_state = data.data.a_state;
      //     self.form.a_sort = data.data.a_sort;
      //     self.form.content = data.data.a_contain;
      //     self.form.toTop = data.data.a_top > 0 ? true : false;
      //     self.form.recommond = data.data.a_recommend > 0 ? true : false;
      //   }
      // );
    }
  }
};
</script>
<style>
.baseinfo {
  border: 1px solid #40abf9;
  border-radius: 3px;
  padding: 60px 20px 20px;
  position: relative;
  margin-bottom: 15px;
  box-sizing: border-box;
  width: 100%;
}
.baseinfo_title {
  display: block;
  background: #40abf9;
  color: #fff;
  padding: 6px 15px;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
.el-form-item__content {
  margin-left: 0 !important;
}
</style>